<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>SuperheroAdmin - Bootstrap Admin Template</title>
	
	<!-- bootstrap -->
	<link href="css/bootstrap/bootstrap.css" rel="stylesheet" />

	<!-- libraries -->
	<link href="css/libs/font-awesome.css" type="text/css" rel="stylesheet" />

	<!-- global styles -->
	<link rel="stylesheet" type="text/css" href="css/compiled/layout.css">
	<link rel="stylesheet" type="text/css" href="css/compiled/elements.css">

	<!-- this page specific styles -->
	<link rel="stylesheet" href="css/libs/morris.css" type="text/css" />

	<!-- google font libraries -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300|Titillium+Web:200,300,400' rel='stylesheet' type='text/css'>

	<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<link href="css/libs/font-awesome-ie7.css" type="text/css" rel="stylesheet" />
	<![endif]-->
</head>
<body>
	<header class="navbar" id="header-navbar">
		<div class="container">
			<a href="index.html" id="logo" class="navbar-brand col-md-3 col-sm-4 col-xs-12">
				<img src="img/logo.png" alt=""/> SuperheroAdmin
			</a>
			
			<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
				<span class="sr-only">Toggle navigation</span>
				<span class="fa fa-bars"></span>
			</button>
			
			<div class="nav-no-collapse pull-right" id="header-nav">
				<ul class="nav navbar-nav pull-right">
					<li class="mobile-search">
						<a class="btn">
							<i class="fa fa-search"></i>
						</a>
						
						<div class="drowdown-search">
							<form role="search">
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<i class="fa fa-search nav-search-icon"></i>
								</div>
							</form>
						</div>
						
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-warning"></i>
							<span class="count">8</span>
						</a>
						<ul class="dropdown-menu notifications-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item-header">You have 6 new notifications</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-comment"></i>
									<span class="content">New comment on ‘Awesome P...</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-plus"></i>
									<span class="content">New user registration</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-envelope"></i>
									<span class="content">New Message from George</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-shopping-cart"></i>
									<span class="content">New purchase</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<i class="fa fa-eye"></i>
									<span class="content">New order</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all notifications
								</a>
							</li>
						</ul>
					</li>
					<li class="dropdown hidden-xs">
						<a class="btn dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-envelope-o"></i>
							<span class="count">16</span>
						</a>
						<ul class="dropdown-menu notifications-list messages-list">
							<li class="pointer">
								<div class="pointer-inner">
									<div class="arrow"></div>
									<div class="arrow-border"></div>
								</div>
							</li>
							<li class="item first-item">
								<a href="#">
									<img src="img/samples/messages-photo-1.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											George Clooney
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-2.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Emma Watson
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item">
								<a href="#">
									<img src="img/samples/messages-photo-3.png" alt=""/>
									<span class="content">
										<span class="content-headline">
											Robert Downey Jr.
										</span>
										<span class="content-text">
											Look, just because I don't be givin' no man a foot massage don't make it 
											right for Marsellus to throw...
										</span>
									</span>
									<span class="time"><i class="fa fa-clock-o"></i>13 min.</span>
								</a>
							</li>
							<li class="item-footer">
								<a href="#">
									View all messages
								</a>
							</li>
						</ul>
					</li>
					<li class="hidden-xs">
						<a class="btn">
							<i class="fa fa-cog"></i>
						</a>
					</li>
					<li class="dropdown profile-dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<img src="img/samples/profile-photo.png" alt=""/>
							<span class="hidden-xs">Scarlett Johansson</span> <b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="user-profile.html"><i class="fa fa-user"></i>Profile</a></li>
							<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
							<li><a href="#"><i class="fa fa-envelope-o"></i>Messages</a></li>
							<li><a href="#"><i class="fa fa-power-off"></i>Logout</a></li>
						</ul>
					</li>
					<li class="hidden-xxs">
						<a class="btn">
							<i class="fa fa-power-off"></i>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<div class="container">
		<div class="row">
			<div class="col-md-2" id="nav-col">
				<section id="col-left">
					<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">	
						<ul class="nav nav-pills nav-stacked">
							<li>
								<a href="index.html">
									<i class="fa fa-dashboard"></i>
									<span>Dashboard</span>
								</a>
							</li>
							<li class="active">
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-bar-chart-o"></i>
									<span>Graphs</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="graphs-xcharts.html">
											xCharts
										</a>
									</li>
									<li>
										<a href="graphs-flot.html">
											Flot
										</a>
									</li>
									<li>
										<a href="graphs-morris.html" class="active">
											Morris &amp; Mixed
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-users"></i>
									<span>Users</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="users.html">
											User list
										</a>
									</li>
									<li>
										<a href="user-profile.html">
											User profile
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-edit"></i>
									<span>Forms</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="form-elements.html">
											Form elements
										</a>
									</li>
									<li>
										<a href="form-wizard.html">
											Form wizard
										</a>
									</li>
									<li>
										<a href="form-wizard-popup.html">
											Form wizard popup
										</a>
									</li>
									<li>
										<a href="form-wysiwyg.html">
											WYSIWYG
										</a>
									</li>
									<li>
										<a href="form-ckeditor.html">
											WYSIWYG CKEditor
										</a>
									</li>
									<li>
										<a href="form-dropzone.html">
											Drop File Upload
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="tables.html">
									<i class="fa fa-table"></i>
									<span>Tables</span>
								</a>
							</li>
							<li>
								<a href="typography.html">
									<i class="fa fa-font"></i>
									<span>Typography</span>
								</a>
							</li>
							<li>
								<a href="calendar.html">
									<i class="fa fa-calendar"></i>
									<span>Calendar</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-star"></i>
									<span>Icons</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="icons-awesome.html">
											Awesome Icons
										</a>
									</li>
									<li>
										<a href="icons-halflings.html">
											Halflings
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-desktop"></i>
									<span>UI Elements</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="ui-elements.html">
											Elements
										</a>
									</li>
									<li>
										<a href="ui-nestable.html">
											Nestable
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="gallery.html">
									<i class="fa fa-picture-o"></i>
									<span>Gallery</span>
								</a>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-folder-open"></i>
									<span>3 Level Menu</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#" class="dropdown-toggle">
											2nd Level
											<i class="fa fa-chevron-circle-down drop-icon"></i>
										</a>
										<ul class="submenu">
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
											<li>
												<a href="#">
													3rd Level
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="#">
											2nd Level
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#" class="dropdown-toggle">
									<i class="fa fa-file-text-o"></i>
									<span>Extra pages</span>
									<i class="fa fa-chevron-circle-down drop-icon"></i>
								</a>
								<ul class="submenu">
									<li>
										<a href="pricing.html">
											Pricing
										</a>
									</li>
									<li>
										<a href="login.html">
											Login
										</a>
									</li>
									<li>
										<a href="login-full.html">
											Login full
										</a>
									</li>
									<li>
										<a href="invoice.html">
											Invoice
										</a>
									</li>
									<li>
										<a href="emails.html">
											Emails
										</a>
									</li>
									<li>
										<a href="faq.html">
											FAQ
										</a>
									</li>
									<li>
										<a href="error-404.html">
											Error 404
										</a>
									</li>
									<li>
										<a href="error-404-v2.html">
											Error 404 Nested
										</a>
									</li>
									<li>
										<a href="error-500.html">
											Error 500
										</a>
									</li>
									<li>
										<a href="extra-grid.html">
											Grid
										</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</section>
			</div>
			<div class="col-lg-10 col-sm-11" id="content-wrapper">
				<div class="row">
					<div class="col-lg-12">
						
						<h1>Morris charts and others</h1>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Morris Area charts</h2>
									<div id="hero-area"></div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-12">
								<div class="main-box">
									<h2>Morris Bar charts</h2>
									<div id="graph-bar"></div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Different line charts</h2>
									<div id="hero-graph"></div>
								</div>
							</div>
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Bar charts</h2>
									<div id="hero-bar"></div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Area charts with multiple datasets</h2>
									<div id="graph"></div>
								</div>
							</div>
							<div class="col-lg-6">
								<div class="main-box">
									<h2>Donut flavours</h2>
									<div id="hero-donut"></div>
								</div>
							</div>
						</div>
						
						<h1>Knob charts</h1>
						<div class="row">
							<div class="col-lg-4">
								<div class="main-box">
									<h2>Display previous value</h2>
									<div class="center-block" style="width: 200px;">
										<input class="knob" data-width="200" data-min="-100" data-fgColor="#3fcfbb" data-displayPrevious=true value="44">
									</div>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="main-box">
									<h2>'cursor' mode</h2>
									<div class="center-block" style="width: 200px;">
										<input class="knob" data-width="200" data-cursor=true data-fgColor="#626f70" data-thickness=.3 value="29">
									</div>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="main-box">
									<h2>Angle offset</h2>
									<div class="center-block" style="width: 200px;">
										<input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#77ab49" value="35">
									</div>
								</div>
							</div>
						</div>
						
						<div class="row">
							<div class="col-lg-4">
								<div class="main-box">
									<h2>Overloaded 'draw' method</h2>
									<div class="center-block" style="width: 200px;">
										<input class="knob" data-width="200" data-angleOffset="180" data-fgColor="#dd504c" data-skin="tron" data-thickness=".1" value="35">
									</div>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="main-box">
									<h2>Readonly</h2>
									<div class="center-block" style="width: 200px;">
										<input class="knob" data-fgColor="#d5ac08" data-thickness=".4" data-readOnly=true value="22">
									</div>
								</div>
							</div>
							<div class="col-lg-4">
								<div class="main-box">
									<h2>Infinite || iPod click wheel</h2>
									<div class="center-block" style="width: 200px;">
										<input class="infinite" data-width="200" data-thickness=".5" data-fgColor="#8f44ad" data-bgColor="#eeeeee" data-displayInput="false" data-cursor=true>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer id="footer-bar">
		<p id="footer-copyright">
			&copy; 2014 <a href="http://www.adbee.sk/" target="_blank">Adbee digital</a>. Powered by SuperheroAdmin.
		</p>
	</footer>
	
	<!-- global scripts -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
	<!-- this page specific scripts -->
	<script src="js/jquery.knob.js"></script>
	<script src="js/raphael-min.js"></script>
	<script src="js/morris.js"></script>
	
	<!-- theme scripts -->
	<script src="js/scripts.js"></script>
	
	<!-- this page specific inline scripts -->
	<script>
	$(function($) {
		graphArea = Morris.Area({
			element: 'graph',
			behaveLikeLine: true,
			data: [
				{x: '2011 Q1', y: 3, z: 3},
				{x: '2011 Q2', y: 2, z: 1},
				{x: '2011 Q3', y: 2, z: 4},
				{x: '2011 Q4', y: 3, z: 3}
			],
			lineColors: ['#77ab49', '#d5ac08', '#dd504c', '#3fcfbb', '#626f70', '#8f44ad'],
			xkey: 'x',
			ykeys: ['y', 'z'],
			labels: ['Y', 'Z']
		});
		
		graphBar = Morris.Bar({
			element: 'graph-bar',
			data: [
				{x: '2011 Q1', y: 3, z: 2, a: 3},
				{x: '2011 Q2', y: 2, z: null, a: 1},
				{x: '2011 Q3', y: 0, z: 2, a: 4},
				{x: '2011 Q4', y: 2, z: 4, a: 3}
			],
			barColors: ['#77ab49', '#d5ac08', '#dd504c', '#3fcfbb', '#626f70', '#8f44ad'],
			xkey: 'x',
			ykeys: ['y', 'z', 'a'],
			labels: ['Y', 'Z', 'A']
		});
		
		var tax_data = [
			{"period": "2011 Q3", "licensed": 3407, "sorned": 660},
			{"period": "2011 Q2", "licensed": 3351, "sorned": 629},
			{"period": "2011 Q1", "licensed": 3269, "sorned": 618},
			{"period": "2010 Q4", "licensed": 3246, "sorned": 661},
			{"period": "2009 Q4", "licensed": 3171, "sorned": 676},
			{"period": "2008 Q4", "licensed": 3155, "sorned": 681},
			{"period": "2007 Q4", "licensed": 3226, "sorned": 620},
			{"period": "2006 Q4", "licensed": 3245, "sorned": null},
			{"period": "2005 Q4", "licensed": 3289, "sorned": null}
		];
		graphLine = Morris.Line({
			element: 'hero-graph',
			data: tax_data,
			lineColors: ['#77ab49', '#d5ac08', '#dd504c', '#3fcfbb', '#626f70', '#8f44ad'],
			xkey: 'period',
			ykeys: ['licensed', 'sorned'],
			labels: ['Licensed', 'Off the road']
		});

		graphDonut = Morris.Donut({
			element: 'hero-donut',
			data: [
				{label: 'Jam', value: 25 },
				{label: 'Frosted', value: 40 },
				{label: 'Custard', value: 25 },
				{label: 'Sugar', value: 10 }
			],
			colors: ['#77ab49', '#d5ac08', '#dd504c', '#3fcfbb', '#626f70', '#8f44ad'],
			formatter: function (y) { return y + "%" }
		});

		graphArea2 = Morris.Area({
			element: 'hero-area',
			data: [
				{period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647},
				{period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441},
				{period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501},
				{period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689},
				{period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293},
				{period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881},
				{period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588},
				{period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175},
				{period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028},
				{period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791}
			],
			lineColors: ['#77ab49', '#d5ac08', '#dd504c', '#3fcfbb', '#626f70', '#8f44ad'],
			xkey: 'period',
			ykeys: ['iphone', 'ipad', 'itouch'],
			labels: ['iPhone', 'iPad', 'iPod Touch'],
			pointSize: 2,
			hideHover: 'auto'
		});
		
		graphBar2 = Morris.Bar({
			element: 'hero-bar',
			data: [
				{device: 'iPhone', geekbench: 136},
				{device: 'iPhone 3G', geekbench: 137},
				{device: 'iPhone 3GS', geekbench: 275},
				{device: 'iPhone 4', geekbench: 380},
				{device: 'iPhone 4S', geekbench: 655},
				{device: 'iPhone 5', geekbench: 1571}
			],
			barColors: ['#77ab49', '#d5ac08', '#dd504c', '#3fcfbb', '#626f70', '#8f44ad'],
			xkey: 'device',
			ykeys: ['geekbench'],
			labels: ['Geekbench'],
			barRatio: 0.4,
			xLabelAngle: 35,
			hideHover: 'auto'
		});
		
		$(window).smartresize(function(){
			graphArea.redraw();
			graphBar.redraw();
			graphLine.redraw();
			graphDonut.redraw();
			graphArea2.redraw();
			graphBar2.redraw();
		});
		
		/* KNOB CHART LIBRARY */
		
		$(".knob").knob({
			change : function (value) {
				//console.log("change : " + value);
			},
			release : function (value) {
				//console.log(this.$.attr('value'));
				console.log("release : " + value);
			},
			cancel : function () {
				console.log("cancel : ", this);
			},
			draw : function () {

				// "tron" case
				if(this.$.data('skin') == 'tron') {

					var a = this.angle(this.cv)  // Angle
						, sa = this.startAngle		  // Previous start angle
						, sat = this.startAngle		 // Start angle
						, ea							// Previous end angle
						, eat = sat + a				 // End angle
						, r = 1;

					this.g.lineWidth = this.lineWidth;

					this.o.cursor
						&& (sat = eat - 0.3)
						&& (eat = eat + 0.3);

					if (this.o.displayPrevious) {
						ea = this.startAngle + this.angle(this.v);
						this.o.cursor
							&& (sa = ea - 0.3)
							&& (ea = ea + 0.3);
						this.g.beginPath();
						this.g.strokeStyle = this.pColor;
						this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
						this.g.stroke();
					}

					this.g.beginPath();
					this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
					this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
					this.g.stroke();

					this.g.lineWidth = 2;
					this.g.beginPath();
					this.g.strokeStyle = this.o.fgColor;
					this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
					this.g.stroke();

					return false;
				}
			}
		});

		// Example of infinite knob, iPod click wheel
		var v, up=0,down=0,i=0
			,$idir = $("div.idir")
			,$ival = $("div.ival")
			,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
			,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
			
		$("input.infinite").knob({
			min : 0
			, max : 20
			, stopper : false
			, change : function () {
				if(v > this.cv){
					if(up){
						decr();
						up=0;
					}else{up=1;down=0;}
				} else {
					if(v < this.cv){
						if(down){
							incr();
							down=0;
						}else{down=1;up=0;}
					}
				}
				v = this.cv;
			}
		});
	});
	</script>
</body>
</html>